// 绝对路径
const path = require('path')
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 绝对路径，拼接相对路径
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/,
        // use: [
        //   {
        //     loader: "css-loader"
        //   }
        // ]
        // 加载顺序是后往前
        use: [
          "style-loader", 
          {
            loader: "css-loader",
            options: {
              // 回头继续使用postcss-loader解析
              importLoaders: 1
            }
          }, 
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              // 回头继续使用postcss-loader解析
              importLoaders: 2
            }
          }, 
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/, 
        // type: "asset/resource",
        // 内联样式
        // type: "asset/inline",
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
        // use: [
        //   {
        //     loader: "file-loader",
        //     options:{
        //       // 命名方法
        //       name: "img/[name].[hash:6].[ext]",
        //       // outputPath: "img"
        //       limit: 100 * 1024
        //     }
        //   }
        // ]
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  }
}